<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <title>boost 搜索引擎</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        html, body {
            height: 100%;
            background-color: #f7f9fc;
            position: relative;
            min-height: 100vh;
        }
        
        body {
            display: flex;
            flex-direction: column;
        }
        
        .container {
            width: 800px;
            margin: 0 auto;
            padding-top: 50px;
            flex: 1;
            padding-bottom: 80px; /* 为footer留出空间 */
        }
        
        .logo {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .logo h1 {
            color: #4e6ef2;
            font-size: 40px;
            letter-spacing: 1px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .container .search {
            width: 100%;
            height: 54px;
            display: flex;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .container .search input {
            flex: 1;
            height: 54px;
            border: 1px solid #e0e4ea;
            border-right: none;
            padding: 0 20px;
            color: #333;
            font-size: 16px;
            outline: none;
            transition: border 0.3s;
        }
        
        .container .search input:focus {
            border-color: #4e6ef2;
        }
        
        .container .search input:focus::placeholder {
            color: #aaa;
        }
        
        .container .search input::placeholder {
            color: #aaa;
        }
        
        .container .search button {
            width: 150px;
            height: 54px;
            background-color: #4e6ef2;
            color: #FFF;
            font-size: 18px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .container .search button:hover {
            background-color: #3c5bd9;
        }
        
        .container .result {
            width: 100%;
        }
        
        .container .result .item {
            margin-bottom: 25px;
            padding: 18px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .container .result .item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        
        .container .result .item a {
            display: block;
            text-decoration: none;
            font-size: 20px;
            color: #4e6ef2;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .container .result .item a:hover {
            text-decoration: underline;
        }
        
        .container .result .item p {
            margin: 10px 0;
            font-size: 16px;
            line-height: 1.5;
            color: #444;
        }
        
        .container .result .item i {
            display: block;
            font-style: normal;
            color: #2e7d32;
            font-size: 14px;
            margin-top: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            margin-bottom: 50px;
        }
        
        .pagination .page-item {
            margin: 0 5px;
        }
        
        .pagination .page-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: white;
            color: #4e6ef2;
            font-size: 16px;
            text-decoration: none;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .pagination .page-link:hover {
            background-color: #f0f5ff;
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }
        
        .pagination .active .page-link {
            background-color: #4e6ef2;
            color: white;
        }
        
        .pagination .disabled .page-link {
            background-color: #f5f5f5;
            color: #aaa;
            cursor: not-allowed;
            box-shadow: none;
        }
        
        .pagination .page-info {
            display: flex;
            align-items: center;
            margin: 0 15px;
            color: #666;
            font-size: 14px;
        }
        
        /* Footer 样式 */
        .footer {
            width: 100%;
            background-color: #fff;
            padding: 20px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            text-align: center;
            margin-top: auto;
        }
        
        .footer-content {
            width: 800px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .copyright {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .footer-links {
            display: flex;
            gap: 20px;
            margin-top: 10px;
        }
        
        .footer-links a {
            color: #4e6ef2;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.2s;
            display: flex;
            align-items: center;
        }
        
        .footer-links a:hover {
            color: #3c5bd9;
            text-decoration: underline;
        }
        
        .footer-links a svg {
            margin-right: 6px;
        }
        
        .disclaimer {
            color: #999;
            font-size: 12px;
            margin-top: 10px;
        }
        
        /* Responsive design */
        @media (max-width: 840px) {
            .container, .footer-content {
                width: 95%;
                padding-left: 20px;
                padding-right: 20px;
            }
            
            .container .search button {
                width: 120px;
            }
            
            .pagination .page-link {
                width: 36px;
                height: 36px;
                font-size: 14px;
            }
            
            .pagination .page-info {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">
            <h1>Boost Searcher</h1>
        </div>
        <div class="search">
            <input type="text" placeholder="请输入搜索关键字">
            <button onclick="Search()">搜索一下</button>
        </div>
        <div class="result">
            <!-- 搜索结果 -->
        </div>
        <div class="pagination">
            <!-- 分页控件 -->
        </div>
    </div>
    
    <!-- Footer区域 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="copyright">©CopyRight 2025 盒马盒马 版权所有</div>
            <div class="footer-links">
                <a href="https://gitee.com/box-he-he" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
                        <path d="M9 18c-4.51 2-5-2-7-2"></path>
                    </svg>
                    Gitee
                </a>
                <a href="https://github.com/box-hippopotamus" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
                        <path d="M9 18c-4.51 2-5-2-7-2"></path>
                    </svg>
                    GitHub
                </a>
            </div>
            <div class="disclaimer">仅供学习使用</div>
        </div>
    </footer>
    
    <script>
        // 全局变量
        let allData = []; // 存储所有搜索结果
        let currentPage = 1; // 当前页码
        let itemsPerPage = 5; // 每页显示的结果数量
        let currentQuery = ""; // 当前搜索关键词
        
        function Search(){
            // 1. 提取数据
            let query = $(".container .search input").val();
            currentQuery = query; // 保存当前搜索关键词
            currentPage = 1; // 重置到第一页
            
            $.ajax({
                type: "GET",
                url: "/s?word=" + query,
                success: function(data){
                    console.log(data);
                    allData = data; // 保存所有数据
                    renderPage(); // 渲染当前页
                }
            });
        }
        
        // 构建当前页的HTML
        function BuildHtml(pageData){
            // 获取html中的result标签
            let result_label = $(".container .result");
            // 清空历史搜索结果
            result_label.empty();
            
            // 如果没有数据或数据为空数组
            if (!pageData || pageData.length === 0) {
                result_label.append('<div class="item"><p style="text-align: center; padding: 20px;">没有找到相关结果</p></div>');
                return;
            }

            for(let elem of pageData){
                let a_label = $("<a>", {
                    text: elem.title,
                    href: elem.url,
                    target: "_blank"
                });
                let p_label = $("<p>", {
                    text: elem.desc
                });
                let i_label = $("<i>", {
                    text: elem.url
                });
                let div_label = $("<div>", {
                    class: "item"
                });
                a_label.appendTo(div_label);
                p_label.appendTo(div_label);
                i_label.appendTo(div_label);
                div_label.appendTo(result_label);
            }
        }
        
        // 构建分页控件
        function BuildPagination(){
            let pagination = $(".pagination");
            pagination.empty();
            
            // 计算总页数
            let totalPages = Math.ceil(allData.length / itemsPerPage);
            
            if (totalPages <= 1) {
                // 如果只有一页或没有数据，不显示分页
                pagination.hide();
                return;
            } else {
                pagination.show();
            }
            
            // 添加"上一页"按钮
            let prevLi = $("<div>", { class: currentPage === 1 ? "page-item disabled" : "page-item" });
            let prevLink = $("<a>", { 
                class: "page-link",
                html: "«",
                click: function() {
                    if (currentPage > 1) {
                        currentPage--;
                        renderPage();
                    }
                }
            });
            prevLink.appendTo(prevLi);
            prevLi.appendTo(pagination);
            
            // 确定显示哪些页码按钮（总是显示当前页及其前后2页）
            let startPage = Math.max(1, currentPage - 2);
            let endPage = Math.min(totalPages, currentPage + 2);
            
            // 确保总是显示5个页码按钮（如果有这么多页）
            if (endPage - startPage < 4 && totalPages > 4) {
                if (startPage === 1) {
                    endPage = Math.min(startPage + 4, totalPages);
                } else if (endPage === totalPages) {
                    startPage = Math.max(endPage - 4, 1);
                }
            }
            
            // 添加页码按钮
            for (let i = startPage; i <= endPage; i++) {
                let li = $("<div>", { class: i === currentPage ? "page-item active" : "page-item" });
                let link = $("<a>", { 
                    class: "page-link",
                    text: i,
                    click: function() {
                        currentPage = i;
                        renderPage();
                    }
                });
                link.appendTo(li);
                li.appendTo(pagination);
            }
            
            // 添加"下一页"按钮
            let nextLi = $("<div>", { class: currentPage === totalPages ? "page-item disabled" : "page-item" });
            let nextLink = $("<a>", { 
                class: "page-link",
                html: "»",
                click: function() {
                    if (currentPage < totalPages) {
                        currentPage++;
                        renderPage();
                    }
                }
            });
            nextLink.appendTo(nextLi);
            nextLi.appendTo(pagination);
            
            // 添加页码信息
            let pageInfo = $("<div>", { 
                class: "page-info",
                text: "第 " + currentPage + " 页，共 " + totalPages + " 页"
            });
            pageInfo.appendTo(pagination);
        }
        
        // 渲染当前页
        function renderPage() {
            // 计算当前页的数据
            let start = (currentPage - 1) * itemsPerPage;
            let end = start + itemsPerPage;
            let pageData = allData.slice(start, end);
            
            // 构建HTML和分页
            BuildHtml(pageData);
            BuildPagination();
            
            // 如果有结果，滚动到结果区域顶部
            if (allData.length > 0) {
                $('html, body').animate({
                    scrollTop: $(".result").offset().top - 20
                }, 200);
            }
        }
        
        // 页面加载完成后
        $(document).ready(function() {
            // 监听回车键
            $(".container .search input").keypress(function(e) {
                if (e.which === 13) {
                    Search();
                }
            });
            
            // 初始焦点和placeholder行为
            let input = $(".container .search input");
            input.focus(function() {
                if ($(this).val() === "请输入搜索关键字") {
                    $(this).val("").attr("placeholder", "请输入搜索关键字");
                }
            });
        });
    </script>
</body>
</html>